<script setup lang="ts">
import setting from '@/utils/setting';
import { computed, ref } from 'vue';

const protocolReg = /^http(s?)/;

const { size = '102', images } = defineProps<{
  images?: string[];
  size?: string;
}>();

const index = ref(0);
const show = ref(false);

const previewImages = computed(() => {
  return images?.map((src) => ({ src: protocolReg.test(src) ? src : setting.imageHost + src }));
});

const showPreview = (i: number) => {
  index.value = i;
  show.value = true;
};
</script>

<template>
  <div class="flex flex-wrap -ml-2">
    <template v-for="(item, index) in previewImages" :key="index">
      <div class="ml-2 mb-2">
        <nut-image
                   :src="item.src"
                   :width="size"
                   :height="size"
                   fit="cover"
                   radius="6"
                   @click="showPreview(index)" />
      </div>
    </template>
  </div>

  <nut-image-preview :show="show" :init-no="index" :images="previewImages" @close="show = false" />
</template>
